import { Card, Row, Col, Button, Table, Space, Select, DatePicker, message } from 'antd';
import { FilePdfOutlined, DownloadOutlined, EyeOutlined, SendOutlined } from '@ant-design/icons';
import { useState } from 'react';

const { RangePicker } = DatePicker;
const { Option } = Select;

const ReportCenter = () => {
  const [selectedPatient, setSelectedPatient] = useState('all');
  const [dateRange, setDateRange] = useState([]);
  const [reportType, setReportType] = useState('monthly');

  // 模拟报告数据
  const reportData = [
    { id: 1, patient: '张三', type: '月度报告', period: '2025-10', status: '已生成', generatedAt: '2025-10-31 10:30' },
    { id: 2, patient: '李四', type: '周报告', period: '2025-10-4周', status: '已生成', generatedAt: '2025-10-31 09:15' },
    { id: 3, patient: '王五', type: '月度报告', period: '2025-10', status: '生成中', generatedAt: '2025-10-31 11:00' },
  ];

  const columns = [
    { title: '患者', dataIndex: 'patient' },
    { title: '报告类型', dataIndex: 'type' },
    { title: '统计周期', dataIndex: 'period' },
    { 
      title: '状态', 
      dataIndex: 'status',
      render: (status) => (
        <span className={status === '已生成' ? 'success-tag' : 'warning-tag'}>
          {status}
        </span>
      )
    },
    { title: '生成时间', dataIndex: 'generatedAt' },
    {
      title: '操作',
      render: (_, record) => (
        <Space>
          <Button 
            type="link" 
            size="small" 
            icon={<EyeOutlined />}
            disabled={record.status !== '已生成'}
          >
            预览
          </Button>
          <Button 
            type="link" 
            size="small" 
            icon={<DownloadOutlined />}
            disabled={record.status !== '已生成'}
          >
            下载
          </Button>
          <Button 
            type="link" 
            size="small" 
            icon={<SendOutlined />}
            disabled={record.status !== '已生成'}
          >
            发送
          </Button>
        </Space>
      ),
    },
  ];

  const handleGenerateReport = () => {
    message.info('开始生成报告');
    // 模拟生成报告操作
    setTimeout(() => {
      message.success('报告生成成功');
    }, 1500);
  };

  const handlePreview = (id) => {
    message.info(`预览报告 ${id}`);
  };

  const handleDownload = (id) => {
    message.success(`下载报告 ${id}`);
  };

  const handleSend = (id) => {
    message.info(`发送报告 ${id}`);
  };

  return (
    <div>
      <h2>报告中心</h2>
      
      {/* 报告生成选项 */}
      <Card style={{ marginBottom: 24 }}>
        <Row gutter={16}>
          <Col span={6}>
            <div>患者筛选</div>
            <Select 
              value={selectedPatient} 
              onChange={setSelectedPatient} 
              style={{ width: '100%' }}
            >
              <Option value="all">全部患者</Option>
              <Option value="1">张三</Option>
              <Option value="2">李四</Option>
              <Option value="3">王五</Option>
            </Select>
          </Col>
          <Col span={6}>
            <div>报告类型</div>
            <Select 
              value={reportType} 
              onChange={setReportType} 
              style={{ width: '100%' }}
            >
              <Option value="daily">日报</Option>
              <Option value="weekly">周报</Option>
              <Option value="monthly">月报</Option>
              <Option value="quarterly">季报</Option>
            </Select>
          </Col>
          <Col span={8}>
            <div>时间范围</div>
            <RangePicker 
              value={dateRange} 
              onChange={setDateRange} 
              style={{ width: '100%' }}
            />
          </Col>
          <Col span={4}>
            <div style={{ height: 24 }}></div>
            <Button type="primary" icon={<FilePdfOutlined />} onClick={handleGenerateReport}>
              生成报告
            </Button>
          </Col>
        </Row>
      </Card>

      {/* 报告统计 */}
      <Row gutter={16} style={{ marginBottom: 24 }}>
        <Col span={6}>
          <Card className="kpi-card">
            <div className="kpi-label">本月生成报告</div>
            <div className="kpi-value">24</div>
          </Card>
        </Col>
        <Col span={6}>
          <Card className="kpi-card">
            <div className="kpi-label">待生成报告</div>
            <div className="kpi-value">8</div>
          </Card>
        </Col>
        <Col span={6}>
          <Card className="kpi-card">
            <div className="kpi-label">已发送报告</div>
            <div className="kpi-value">19</div>
          </Card>
        </Col>
        <Col span={6}>
          <Card className="kpi-card">
            <div className="kpi-label">下载次数</div>
            <div className="kpi-value">42</div>
          </Card>
        </Col>
      </Row>

      {/* 报告列表 */}
      <Card title="报告列表">
        <Table 
          dataSource={reportData} 
          columns={columns} 
          rowKey="id" 
          pagination={{ pageSize: 10 }}
        />
      </Card>
    </div>
  );
};

export default ReportCenter;
